<script setup lang="ts">
import { ref } from 'vue';
import * as rrweb  from 'rrweb';
import { eventWithTime } from '@rrweb/types';
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

const inputValue = ref('');
let recording: any = null;
let recordedEvents: eventWithTime[] = [];
const player = ref<any>(null);
const startRecording = () => {
  if (recording) {
    console.log('已经在录制中');
    return;
  }

  recording = rrweb.record({
    emit(event:any) {
      recordedEvents.push(event);
    },
    recordCanvas: true,
    maskAllInputs: false
  });

  console.log('开始录制');
};

const stopRecording = () => {
  if (!recording) {
    console.log('没有正在录制的会话');
    return;
  }
  recording();
  recording = null;
  console.log('停止录制');
};

const playRecording = () => {
  new rrwebPlayer({
    target: player.value,
    props: {
      events: recordedEvents
    }
  })
  console.log(recordedEvents);
};
</script>

<template>
  <div id="app">
    <h1>RRWeb 操作录制与回放示例</h1>
    <div>
      <input type="text" v-model="inputValue" placeholder="输入一些文本" />
      <button @click="startRecording">开始录制</button>
      <button @click="stopRecording">停止录制</button>
      <button @click="playRecording">播放录制</button>
    </div>
    <div ref="player" style="border: 1px solid #ccc; margin-top: 20px; height: 400px; overflow: hidden"></div>
  </div>
</template>

<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
